<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由间总线通信</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .red {
            color: red;
        }

        ul a {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>Hello App</h1>
    <p>
        <router-link to="/foo">Foo</router-link>
        |
        <router-link to="/bar">bar</router-link>
    </p>

    <router-view></router-view>
</div>

<script>
    /*
        注意事项参见 /componet/component-siblings-c.html
    */


    window.EventBus = new Vue()
    const Foo = {
        template: '<div>' +
            '  <div>' +
            '    <button @click="handleClick">触发</button>' +
            '  </div>' +
            '</div>',

        name: 'TabHome',
        data() {
            return {
                msg: 'home data  '
            }
        },
        methods: {
            handleClick() {
                this.$router.push('/bar')
            }
        },
        beforeCreate() {
            console.log('A beforecreate')
        },
        created() {
            console.log('A created')
        },
        beforeMount() {
            console.log('A beforemount')
        },
        mounted() {
            console.log('A mounted')
        },
        beforeUpdate() {
            console.log('A before update')
        },
        updated() {
            console.log('A updated')
        },
        beforeDestroy() {
            console.log('A before destroy')
            window.EventBus.$emit('getData', this.msg)
        },
        destroyed() {
            console.log('A destroyed')
        }

    }
    const Bar = {
        template: '<div>' +
            '  {{post}}' +
            '  <router-link to="/foo">返回</router-link>' +
            '</div>',
        name: 'TabPosts',
        data() {
            return {
                post: 'tabposts',
                number: 0
            }
        },
        methods: {
            getData(msg) {
                this.post = msg
            }
        },
        beforeCreate() {
            console.log('%c%s',
                'background: yellow;',
                'B beforecreate')
            window.EventBus.$on('getData', (msg) => this.getData(msg))
        },
        created() {
            console.log('%c%s',
                'background: yellow;',
                'B created')
        },
        beforeMount() {
            console.log('%c%s',
                'background: yellow;',
                'B beforemount')
        },
        mounted() {
            console.log('%c%s',
                'background: yellow;',
                'B mounted')
        },
        beforeUpdate() {
            console.log('%c%s',
                'background: yellow;',
                'B before update')
        },
        updated() {
            console.log('%c%s',
                'background: yellow;',
                'B updated')
        },
        beforeDestroy() {
            console.log('%c%s',
                'background: yellow;',
                'B before destroy')
        },
        destroyed() {
            console.log('%c%s',
                'background: yellow;',
                'B beforecreate！')
        }
    }


    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]

    const router = new VueRouter({
        routes  //缩写，相当于 routers : routers
    });

    const app = new Vue({
        router
    }).$mount("#app");
</script>
</body>
</html>
